<template>
  <div class="sim">
    <div class="sim_treeBg">
      <MetaChoiceList
        ref="sim_list"
        title="卡组"
        title-btn="新建"
        :list-data="cardGroupDataStr"
        @topBtnClick="newRoleBtnClick"
        @editBtnClick="editBtnClick"
        @roloeItemChoose="roloeItemChoose"
        @deleteBtnClick="roleDeleteBtnClick"
        :treeBtn="choiceListTreeBtn"
      />
    </div>
    <div class="sim_infoBg">
      <div class="sim_info">
        <div
          v-if="Object.keys(cardGroupfoItem).length > 0"
          class="organizationO_rightArea"
        >
          <div class="organizationO_infoTitleBg">
            <div class="organizationO_infoTitle">卡组信息</div>
            <el-button type="small" style="margin-left: 15px" @click="refresh"
              >刷新</el-button
            >
            <!-- <div class="organizationO_refresh" @click="refresh">刷新</div> -->
          </div>
          <el-form
            ref="org_roleInfo"
            :model="cardGroupfoItem"
            label-width="120px"
            size="mini"
            label-position="left"
            class="organizationO_info"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="卡组号">
                  <el-col class="organizationO_infoLabel">{{
                    cardGroupfoItem.groupId
                  }}</el-col>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="卡组名称">
                  <el-col class="organizationO_infoLabel">{{
                    cardGroupfoItem.groupName
                  }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="购卡人">
                  <el-col class="organizationO_infoLabel">{{
                    cardGroupfoItem.orderer
                  }}</el-col>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="购卡时间">
                  <el-col class="organizationO_infoLabel">{{
                    cardGroupfoItem.orderTime
                  }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="总流量">
                  <el-col class="organizationO_infoLabel">{{
                    cardGroupfoItem.dataTotal
                  }}</el-col>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="已用流量">
                  <el-col class="organizationO_infoLabel">{{
                    cardGroupfoItem.dataUsed
                  }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <MetaSearchForm @on-search="tableSearch">
            <el-form :model="modelSearch" class="sim_searchForm">
              <el-form-item
                label="物联网卡号"
                label-width="150px"
                class="sim_searchFormItem"
              >
                <el-input v-model="modelSearch.msisdn" clearable></el-input>
              </el-form-item>
              <el-form-item
                label="集成电路卡识别码"
                label-width="150px"
                class="sim_searchFormItem"
                clearable
              >
                <el-input v-model="modelSearch.iccid" clearable></el-input>
              </el-form-item>
            </el-form>
          </MetaSearchForm>
          <MetaPageTable
            ref="cardItemTable"
            class="cardItemTable"
            table-title="网卡信息"
            tableHeight="500"
            :need-checkbox="false"
            :is-auto-req="false"
            :tableData="currentUserData"
            :display-item="displayItem"
            :btn-group="btnGroup"
            :line-btn-group="lineBtnGroup"
            @btnClick="tableBtnClick"
            @lineBtnClick="tableInlineBtnClick"
          />
        </div>
      </div>
    </div>
    <el-dialog
      v-if="newcardGroupFlag"
      :title="newCardGroupItem.id && newCardGroupItem.id !== '' ? '编辑卡组' : '新建卡组'"
      :visible.sync="newcardGroupFlag"
      width="50%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="cardGroupCancel"
    >
      <el-form
        ref="cardGroup_form"
        :model="newCardGroupItem"
        label-width="110px"
        :rules="cardGroupRules"
      >
        <el-form-item label="卡组号" prop="groupId">
          <el-input
            v-model="newCardGroupItem.groupId"
            placeholder="请输入卡组号"
            :disabled="newCardGroupItem.id"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡组名称" prop="groupName">
          <el-input
            v-model="newCardGroupItem.groupName"
            placeholder="请输入卡组名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="购卡人" prop="orderer">
          <el-input
            v-model="newCardGroupItem.orderer"
            placeholder="请输入购卡人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model="newCardGroupItem.phone"
            placeholder="请输入购卡人联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="购买时间" prop="orderTime">
          <el-date-picker
            v-model="newCardGroupItem.orderTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="newCardGroupItem.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="cardGroupCancel()">取消</el-button>
        <el-button type="primary" size="mini" @click="cardGroupSave()">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="addCardGroupFlag"
      :title="cardItem.id && cardItem.id !== '' ? '编辑网卡' : '新建网卡'"
      :visible.sync="addCardGroupFlag"
      width="50%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="cardAddCancel"
    >
      <el-form
        ref="card_form"
        :model="cardItem"
        label-width="140px"
        :rules="cardItemRules"
      >
        <el-form-item label="名称" prop="cardName">
          <el-input v-model="cardItem.cardName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="物联网卡号" prop="msisdn">
          <el-input v-model="cardItem.msisdn" placeholder="请输入物联网卡号"></el-input>
        </el-form-item>
        <el-form-item label="设备绑定" prop="eid">
          <el-select
            v-model="equipmentName"
            @change="onChange"
            collapse-tags
            filterable
            placeholder="请选择所在未绑定设备"
          >
            <el-option
              v-for="item in equipmentList"
              :key="item.id"
              :label="item.equipmentname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集成电路卡识别码" prop="iccid">
          <el-input
            v-model="cardItem.iccid"
            placeholder="请输入集成电路卡识别码"
          ></el-input>
        </el-form-item>

        <el-form-item label="所在省份 " prop="province">
          <el-select
            v-model="cardItem.province"
            collapse-tags
            placeholder="请选择所在省份"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="cardItem.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="cardAddCancel()">取消</el-button>
        <el-button type="primary" size="mini" @click="cardAddSave()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 导入对话框 -->
    <el-dialog title="批量导入" :visible.sync="importFlag" width="width" center>
      <div>
        <el-form label-width="150px">
          <el-form-item label="文件上传" prop="upload">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :headers="{
                'x-auth-token': token,
              }"
              :limit="1"
              :data="usegroupId"
              :file-list="fileList"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
            >
              <el-button size="small" type="primary">上传文件并保存</el-button>
              <div slot="tip" class="el-upload__tip">只能上传xlsx格式文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <!-- <div slot="footer">
        <el-button @click="dialogImportVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogImportVisible = false"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import MetaChoiceList from "../components/MetaChoiceList";
import MetaPageTable from "../components/MetaPageTable";
import deepClone from "../utils/deepClone";
import MetaSearchForm from "../components/MetaSearchForm";
import {
  validateLetterNumberWord,
  removeWhiteSpace,
  isTel,
  validateNumber,
  validateWord,
} from "../utils/validate";

import utils from "../utils/utils";
export default {
  name: "sim",
  components: {
    MetaChoiceList,
    MetaPageTable,
    MetaSearchForm,
  },
  data() {
    let checkName = (rule, value, callback) => {
      removeWhiteSpace(value);
      if (!value) {
        callback(new Error("必填项不可为空"));
      } else {
        if (value.length > 50) {
          callback(new Error("内容录入过长"));
        } else if (!validateLetterNumberWord(value)) {
          callback(new Error("请准确输入名称"));
        } else {
          return callback();
        }
      }
    };
    let checkManName = (rule, value, callback) => {
      removeWhiteSpace(value);

      if (!value) {
        callback(new Error("必填项不可为空"));
      } else {
        if (value.length > 50) {
          callback(new Error("内容录入过长"));
        } else if (!validateWord(value)) {
          callback(new Error("请输入汉字"));
        } else {
          return callback();
        }
      }
    };
    let checkNum = (rule, value, callback) => {
      if (!value) {
        callback(new Error("必填项不可为空"));
      } else {
        if (value.length > 50) {
          callback(new Error("内容录入过长"));
        } else if (!validateNumber(value)) {
          callback(new Error("请输入纯数字"));
        } else {
          return callback();
        }
      }
    };

    let checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("必填项不可为空"));
      } else if (!isTel(value)) {
        return callback(new Error("请准确填写联系电话"));
      } else {
        return callback();
      }
    };

    return {
      cardGroupfoItem: {},
      token: localStorage.getItem("token"),
      uploadUrl: process.env.PROGOO_GATE_WATER + "admin/netCard/import",
      cardGroupDataStr: "",
      importFlag: false,
      usegroupId: {
        groupId: "",
      },
      showFilelist: [],
      choiceListTreeBtn: {
        ifEdit: true,
        ifDelete: true,
      },
      newCardGroupItem: {
        groupId: "",
        groupName: "",
        orderer: "",
        orderTime: "",
        phone: "",
        remark: "",
      },
      cardItem: {
        id: "",
        cardName: "",
        iccid: "",
        eid: "",
        msisdn: "",
        province: "",
        remark: "",
        createDate: "",
        num: "",
      },
      equipmentName: "",
      personInfoItem: {
        userId: "",
        techniqueId: [],
      },
      newcardGroupFlag: false,
      addCardGroupFlag: false,
      equipmentList: "",
      cardGroupRules: {
        groupId: [
          {
            required: true,
            validator: checkNum,
            trigger: "blur",
          },
        ],
        groupName: [
          {
            required: true,
            validator: checkName,
            trigger: "blur",
          },
        ],
        orderer: [
          {
            required: true,
            trigger: "blur",
            validator: checkManName,
          },
        ],
        orderTime: [{ required: true, message: "请输入购买时间", trigger: "blur" }],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: checkPhone,
          },
        ],
      },
      cardItemRules: {
        cardName: [
          {
            required: true,
            validator: checkName,
            trigger: "blur",
          },
        ],
        msisdn: [
          {
            required: true,
            validator: checkNum,
            trigger: "blur",
          },
        ],
        eid: [{ required: true, message: "请选择设备", trigger: "blur" }],
        iccid: [
          {
            required: true,
            validator: checkNum,
            trigger: "blur",
          },
        ],
        province: [{ required: true, message: "请输入所在省份", trigger: "blur" }],
      },
      currentUserData: {},
      displayItem: [
        {
          label: "编号",
          prop: "num",
          width: "150",
        },
        {
          label: "名称",
          prop: "cardName",
          width: "150",
        },
        {
          label: "绑定设备",
          prop: "equipmentName",
          width: "150",
        },
        {
          label: "物联网卡号",
          prop: "msisdn",
          width: "150",
        },
        {
          label: "集成电路卡识别码 ",
          prop: "iccid",
        },
        {
          label: "所在省份",
          prop: "province",
        },
        {
          label: "创建时间",
          prop: "createDate",
        },
        {
          label: "更新时间",
          prop: "updateDate",
        },
        {
          label: "备注",
          prop: "remark",
        },
      ],
      btnGroup: [
        {
          id: "export",
          title: "模板下载",
        },
        {
          id: "import",
          title: "批量导入",
        },
        {
          id: "add",
          title: "新建",
        },
      ],
      lineBtnGroup: [
        {
          id: "edit",
          title: "编辑",
        },
        {
          id: "delete",
          title: "删除",
        },
      ],
      provinceList: [],
      departmentLeftUserList: [],
      modelSearch: {
        iccid: "",
        msisdn: "",
      },
      fileList: [],
    };
  },
  created() {},
  mounted() {
    this.initcardGroupList();
    this.initPCAList(0, "province");
    this.getEquipmentList();
  },
  destroyed() {},
  methods: {
    beforeUpload(file) {
      let excelfileExtend = ".xlsx"; //设置文件格式
      let fileExtend = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
      if (excelfileExtend.indexOf(fileExtend) <= -1) {
        this.$message.error("文件格式错误");
        return;
      }
    },
    uploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.fileList = [];
        this.importFlag = false;
        this.$notify.success({
          title: "成功",
          message: "数据导入成功!",
        });
        this.$nextTick(() => {
          this.getCardItem(this.usegroupId.groupId);
        });
      } else if (response.code === 400) {
        this.fileList = [];

        if (response.message === "物联网卡号/集成电路识别码重复") {
          this.$notify.error({
            title: "导入失败",
            message: "物联网卡号/集成电路识别码重复!",
          });
        } else {
          this.$notify.error({
            title: "失败",
            message: "导入失败！",
          });
        }
      }
    },
    initcardGroupList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/netCardGroup/getAllList",
        method: "get",
        params: {},
      }).then((res) => {
        if (res.data.code === 200) {
          let cardGroupData = [];
          let currentDataItem = {};

          for (let i in res.data.result) {
            let item = {};
            item = res.data.result[i];
            item.groupId = res.data.result[i].groupId;
            item.name = res.data.result[i].groupName;
            item.orderer = res.data.result[i].orderer;
            item.orderTime = res.data.result[i].orderTime;
            item.phone = res.data.result[i].phone;
            item.remark = res.data.result[i].remark;
            cardGroupData.push(item);
            if (
              Object.keys(this.cardGroupfoItem).length > 0 &&
              this.cardGroupfoItem.groupId === item.groupId
            ) {
              currentDataItem = item;
            }
          }
          this.cardGroupDataStr = JSON.stringify(cardGroupData);
          if (Object.keys(currentDataItem).length > 0) {
            this.cardGroupfoItem = deepClone(currentDataItem);
          } else {
            this.cardGroupfoItem = {};
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    roloeItemChoose(item) {
      this.modelSearch = {
        iccid: "",
        msisdn: "",
      };
      localStorage.setItem("cardGruopItem", item.groupId);
      this.cardGroupfoItem = deepClone(item);
      this.getAlldataUsed(item.groupId);
      this.getCardItem(item.groupId);
      this.usegroupId.groupId = item.groupId;
    },
    tableSearch() {
      this.$nextTick(() => {
        this.getCardItem(
          this.cardGroupfoItem.groupId,
          this.modelSearch.msisdn,
          this.modelSearch.iccid
        );
      });
    },
    newRoleBtnClick() {
      this.newCardGroupItem = {
        groupId: "",
        groupName: "",
        orderer: "",
        orderTime: "",
        phone: "",
        remark: "",
      };
      this.newcardGroupFlag = true;
    },
    editBtnClick(item) {
      this.newCardGroupItem = {
        id: item.id,
        groupId: item.groupId,
        groupName: item.groupName,
        orderer: item.orderer,
        orderTime: item.orderTime,
        phone: item.phone,
        remark: item.remark,
      };
      this.newcardGroupFlag = true;
    },
    cardGroupCancel() {
      this.newcardGroupFlag = false;
      this.newCardGroupItem = {};
    },
    onChange(e) {
      this.cardItem.eid = e;
    },
    roleDeleteBtnClick(item) {
      this.$confirm("卡组一经删除，将无法恢复，是否确认删除？", "确认删除此卡组?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {};
        params.id = item.groupId;
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/netCardGroup/delete",
          method: "get",
          params: params,
        }).then((res) => {
          if (res.data.code === 200) {
            if (res.data.message === "成功") {
              this.$notify.success({
                title: "成功",
                message: "卡组删除成功",
              });
              this.initcardGroupList();
            } else if (res.data.message === "卡组无法删除") {
              this.$notify.warning({
                title: "警告",
                message: "卡组下存在物联网卡，无法删除!",
              });
            }
          } else if (res.data.code === 400) {
          }
        });
      });
    },
    cardGroupSave() {
      this.$refs["cardGroup_form"].validate((valid) => {
        if (valid) {
          let param = {};
          param.groupId = this.newCardGroupItem.groupId.trim();
          param.groupName = this.newCardGroupItem.groupName.trim();
          param.orderer = this.newCardGroupItem.orderer.trim();
          param.orderTime = this.newCardGroupItem.orderTime;
          param.phone = this.newCardGroupItem.phone;
          param.remark = this.newCardGroupItem.remark;
          if (this.newCardGroupItem.id && this.newCardGroupItem.id !== "") {
            param.id = this.newCardGroupItem.id;
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/netCardGroup/save",
            method: "post",
            data: param,
          }).then((res) => {
            if (res.data.code === 200) {
              if (res.data.message === "成功") {
                this.$notify.success({
                  title: "保存成功",
                });
                this.newcardGroupFlag = false;
                this.initcardGroupList();
              } else if (res.data.message === "卡组号重复") {
                this.$notify.error({
                  title: "错误",
                  message: "卡组已存在，请勿重复录入！",
                });
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    tableBtnClick(item) {
      if (item.button === "add") {
        this.addCardGroupFlag = true;
      } else if (item.button === "export") {
        //上线后生效
        window.open(process.env.PROGOO_FILE + "SIMImport.xlsx");
      } else if (item.button === "import") {
        this.importFlag = true;
      }
    },
    tableInlineBtnClick(item) {
      if (item.button === "edit") {
        this.cardItem = {
          cardName: item.rows.cardName,
          msisdn: item.rows.msisdn,
          iccid: item.rows.iccid,
          remark: item.rows.remark,
          eid: item.rows.eid,
          id: item.rows.id,
          province: item.rows.province,
          num: item.rows.num,
          createDate: item.rows.createDate,
        };
        this.equipmentName = item.rows.equipmentName;

        this.addCardGroupFlag = true;
      } else if (item.button === "delete") {
        this.$confirm("确认删除？", "确认删除？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/netCard/delete?id=" + item.rows.id,
            method: "get",
            params: {},
          }).then((res) => {
            if (res.data.code === 200) {
              this.getCardItem(this.cardGroupfoItem.groupId);
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data.message,
              });
            }
          });
        });
      }
    },
    initPCAList(id, type, callback) {
      if (id === "") {
        return;
      }
      let data = {};
      if (type === "province") {
        data.level = 1;
      } else if (type === "city") {
        data.level = 2;
      } else if (type === "area") {
        data.level = 3;
      }
      data.parentid = id;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/company/area",
        method: "post",
        data: data,
      }).then((res) => {
        if (type === "province") {
          this.provinceList = res.data.result;
        } else if (type === "city") {
          this.cityList = res.data.result;
        } else if (type === "area") {
          this.areaList = res.data.result;
        }
        if (callback && typeof callback === "function") {
          callback();
        }
      });
    },

    cardAddSave() {
      let createUser = localStorage.getItem("username");
      this.$refs["card_form"].validate((valid) => {
        if (valid) {
          let param = {};
          param.eid = this.cardItem.eid;
          param.createDate = this.cardItem.createDate;
          param.num = this.cardItem.num;
          param.cardGroupId = this.cardGroupfoItem.groupId;
          param.cardName = this.cardItem.cardName.trim();
          param.msisdn = this.cardItem.msisdn.trim();
          param.iccid = this.cardItem.iccid.trim();
          param.province = this.cardItem.province;
          param.remark = this.cardItem.remark;
          param.createUser = createUser;
          param.id = this.cardItem.id;
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/netCard/save",
            method: "post",
            data: param,
          }).then((res) => {
            if (res.data.code === 200) {
              if (res.data.message === "成功") {
                this.$notify.success({
                  title: "保存成功",
                });
                this.$nextTick(() => {
                  this.getCardItem(this.cardGroupfoItem.groupId);
                  this.cardAddCancel();
                  this.getEquipmentList();
                });
                this.cardItem = {};
              } else if (res.data.message === "物联网卡号") {
                this.$notify.error({
                  title: "错误",
                  message: "物联网卡号重复！",
                });
              } else if (res.data.message === "集成电路识别码重复") {
                this.$notify.error({
                  title: "错误",
                  message: "集成电路识别码重复！",
                });
              }
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    getEquipmentList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/notBindList",
        method: "post",
      }).then((res) => {
        if (res.data.code === 200) {
          this.equipmentList = res.data.result;
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    cardAddCancel() {
      this.addCardGroupFlag = false;
      this.cardItem = {};
      this.equipmentName = "";
    },
    refresh() {
      let cardGruopItem = localStorage.getItem("cardGruopItem");
      this.getCardItem(cardGruopItem);
      this.getAlldataUsed(cardGruopItem);
    },
    getCardItem(item, msisdn, iccid) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/netCard/getPage",
        method: "post",
        data: {
          page: "1",
          limit: "999",
          cardName: "",
          msisdn: msisdn,
          iccid: iccid,
          province: "",
          cardGroupId: item,
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.currentUserData = {};
          this.currentUserData.page = 1;
          this.currentUserData.totalElements = res.data.result.totalElements;
          this.currentUserData.content = res.data.result.content;
          this.$nextTick(() => {
            this.$refs.cardItemTable.formDataInit();
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getAlldataUsed(item) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/netCardGroup/getGroupData?groupId=" + item,
        method: "post",
      }).then((res) => {
        if (res.data.code === 200) {
          if (res.data.result[0] == "-1" || res.data.result[1] == "-1") {
            this.cardGroupfoItem.dataUsed = "暂未获取到流量";
            this.cardGroupfoItem.dataTotal = "暂未获取到流量";
          } else {
            this.cardGroupfoItem.dataUsed = res.data.result[1] + "M";
            this.cardGroupfoItem.dataTotal = res.data.result[0] + "M";
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.sim {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .sim_treeBg {
    height: 100%;
  }
  .sim_infoBg {
    width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 7px;
    flex: 1;
  }
  .sim_info {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 1px solid rgb(228, 234, 236);
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
    padding: 15px;
    .organizationO_rightArea {
      .cardItemTable {
        float: left;
        width: 100%;
        overflow-y: unset;
      }
      .organizationO_infoTitleBg {
        width: 100%;
        float: left;
        // margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
        .organizationO_infoTitle {
          font-size: 20px;
          float: left;
          height: 30px;
          line-height: 30px;
        }
        .organizationO_refresh {
          width: 60px;
          font-size: 16px;
          float: left;
          text-align: center;
          margin-left: 25px;
          cursor: pointer;
          border: 1px solid #9999;
          color: #999;
          border-radius: 8px;
          height: 30px;
          line-height: 30px;
        }
        .organizationO_refresh:hover {
          width: 60px;
          font-size: 16px;
          float: left;
          text-align: center;
          margin-left: 25px;
          cursor: pointer;
          border: 1px solid #9999;
          color: #fff;
          background: #999;
          border-radius: 8px;
          height: 30px;
          line-height: 30px;
        }
        .organizationO_delBtn {
          float: right;
        }
      }
      .organizationO_info {
        width: 100%;
        float: left;
        padding-top: 10px;
        padding-bottom: 10px;
        .organizationO_infoLabel {
          color: #606266;
        }
        .organizationO_formItem {
          display: flex;
          align-items: center;
        }
      }
      .sim_searchForm {
        width: 100%;
        .sim_searchFormItem {
          float: left;
        }
      }
    }
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
